<template>
  <div class="radio-header mt-4 mb-4">
    <ul class="grid gap-4" :class="store.isFlag ? 'grid-cols-10' : 'grid-cols-4'">
      <li
          v-for="radio in radioHeaderData"
          :key="radio?.id"
          class="flex flex-col items-center cursor-pointer yu-bgColor-hover-only pt-2 pb-2"
          :class="radioTypeId === radio?.id ? 'yu-bgColor-tew-only' : ''"
          @click="selectRadioType(radio)"
      >
        <div class="w-10 h-10">
          <img class="w-full h-full" :src="radio.pic96x96Url" alt="" />
        </div>
        <span class="text-sm">{{ radio.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";

const store = useStore()
// 接受父组件传递的电台数据
defineProps({
  radioHeaderData: Array,
  radioTypeId: Number
})

const $emit = defineEmits(['selectRadioType'])

// 选择电台类型
const selectRadioType = (radio) => {
  $emit('selectRadioType', radio)
}
</script>

<style scoped>

</style>
